<template>
	<div class="interface-test" style="height:593px">
		<div class="if-test">
			<div class="header">
				<el-select v-model="method" placeholder="get">
					<el-option label="post" value="post"></el-option>
					<el-option label="get" value="get"></el-option>
				</el-select>
				<el-input v-model="input" placeholder="请输入内容"></el-input>
				<el-button type="success"  size="mini" @click="submit">send</el-button>
				
			</div>
      <div style="margin-top:20px;">
        <el-form>
          <el-form-item prop="datatype">
            <el-radio-group v-model="datatype">
              <el-radio label="none">none</el-radio>
              <el-radio label="form-data">form-data</el-radio>
              <el-radio label="x-www-form-urlencoded">x-www-form-urlencoded</el-radio>
              <el-radio label="raw">raw</el-radio>
              <el-radio label="binary">binary</el-radio>
            </el-radio-group>
            <el-select v-model="type" placeholder="JSON" style="float:right;">
              <el-option label="JSON" value="Json"></el-option>
              <el-option label="Text" value="text"></el-option>
              <el-option label="HTML" value="html"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div class="request">
          <span>request</span>
          <el-row :gutter="20">
            <el-col :span="12">
              <textarea type="textarea" :rows="7" v-model="request" class="textarea"></textarea>
            </el-col>
          </el-row>
        </div>

      </div>

				<keep-alive exclude="home">
          <router-view></router-view>
				</keep-alive>
			</div>
      <div class="response">
        <span>response</span>
        <el-row :gutter="20">
          <el-col :span="12">
            <textarea type="textarea" :rows="7" v-model="response" class="textarea"></textarea>
          </el-col>
        </el-row>

      </div>
		</div>
  
</template>

<script lang="ts">
import axios from "axios";

export default {
  inject: ["reload"],
  name: "interface-test",
  components: {
  },
  data() {
    return {
      method:'',
      input:'',
	  type:'',
      datatype:'',
      request:'',
      response:'',
    };
  },
  methods: {
    submit(){
		if(this.method === 'post'){
			axios({
				url: this.input,
				method: 'post',
				data : this.request,
				headers: { 
    			'Content-Type': 'application/json'
  				},
			}).then(res=>{
				this.response = JSON.stringify(res.data)
			}).catch((err)=>{
				console.log("数据获取失败"+err)
			})
		}else{
			axios.get(this.input, {           
          }).then(res=>{
			this.response = JSON.stringify(res.data)
		}).catch((err) => {
            console.log("数据获取失败" + err);
          });
		}
	}
  },
};
</script>
<style lang="less" scoped>
.interface-test {
	margin: 20px;
	height: 592px;
}
// .if-test {
// 	top: 50%;
// 	left: 50%;
// }
.header {
	display: flex;
	button {
		margin-left:20px;
	}
}
.BODY{
	margin-left:20px;
}
.type{
	margin-top:30px;
}
.response{
  margin-top:10px;
}
span{
  font-size:20px;
  line-height: 50px;
}
.request{
  height:210px;
}
.textarea{
  border:1px solid #ae9c9c;
  width:983px;
  height:120px;
}
</style>
